<template>
    <div>
        <el-badge :hidden="hidden" :value="value" class="item">
            <div class="lingdang" @click="openMessage"></div>
        </el-badge>
        <com-dialog
            ref="messageDialog"
            title="消息提醒"
           
            width="1020px"
            className="newDialogClass"
        >
            <div slot="body">
                <tabpanne></tabpanne>
            </div>
        </com-dialog>
    </div>
</template>

<script>
import service from "@/service";
import tabpanne from "@/components/topNav/children";

export default {
    name: "Lingdang",
    components:{tabpanne},
    data() {
        return {
            activeName:'0',
            timer: "",
            ugentTimer: null,
            value: 0,
            hidden: true,
            selectedChangeData: [],
            notifyInstance: null, // notify实例
            urgentData: {}, // 紧急任务信息

        };
    },
    mounted() {
        // this.timer = setInterval(async () => {
        //     this.getMessage();
        // }, 10000);
        this.ugentTimer = setInterval(async () => {
            this.getUgentNum();
        }, 30000);
    },

    computed: {

        tablist() {
            return [
                {
                    label: "未读",
                    msgStatus: "0",
                    jobNo:this.$tool.getBaseInfo().staffId,
                    columnConfig: this.columnConfig,
                },
                {
                    label: "已读",
                    msgStatus: "1",
                    jobNo:this.$tool.getBaseInfo().staffId,
                    columnConfig: this.readedcolumnConfig,
                }
               
            ];
        },
        columnConfig(){

            return [
                { label: "", type: "index" ,align:'center'},

                { label: "消息抬头", value: "msgTitle" ,align:'center'},
                {
                    label: "提醒时间",
                    value: "msgTime"
                    ,align:'center'
                    
                },

                { label: "消息内容", value: "msgContent" ,align:'center'},
                {
                    label: "是否已读",
                    value: "msgStatus",
                    align:'center',
                    type: "render",
                    render: (h, { data: { row } }) => {
                        const state = {
                            0: "未读",
                            1: "已读",
                        };
                        return <span>{state[row.msgStatus]} </span>;
                    },
                },
                {
                    label: "操作",
                    align:'center',
                    type: "render",
                    render: (h, { data: { row } }) => {
                        const readingFun=async ()=>{
                            let result = await service("updateNoticeStatus", {
                                data: {
                                    msgId:row.msgId
                                }
                            });
                            if(result.status=='0000'){
                                this.resetOut() 
                            }       
                        }
                        return <span class="blue-text-button " on-click={readingFun}>设为已读 </span>;
                    },
                },
            ]
        },
        readedcolumnConfig(){

            return [
                // { type: "select" },
                { label: "", type: "index" ,align:'center'},

                { label: "消息抬头", value: "msgTitle" ,align:'center'},
                {
                    label: "提醒时间",
                    value: "msgTime",
                    align:'center',
                },

                { label: "消息内容", value: "msgContent" ,align:'center'},
                {
                    label: "是否已读",
                    value: "msgStatus",
                    align:'center',
                    type: "render",
                    render: (h, { data: { row } }) => {
                        const state = {
                            0: "未读",
                            1: "已读",
                        };
                        return <span>{state[row.msgStatus]} </span>;
                    },
                },
            ]
        }
    },
    methods: {
        closeNotify() {
            this.notifyInstance && this.notifyInstance.close();
            this.notifyInstance = null;
        },
        // 设置紧急任务已处理
        async setUrgentRead() {
            let params = {
                planList: (this.urgentData?.rows||[]).map(item => {
                    return {
                        planId: item.plan_id
                    }
                }),
                "staffId":this.staffId,//工号
            }
            let result = await service('tobplan_savePlanTipsFlag', {
                data: params
            })
            // if(result) {

            // }
        },
        showNotify() {
            const jumpTo = () => {
                this.setUrgentRead();
                this.$router.push({
                    path: "/task/taskHome"
                })
                this.closeNotify();
            }
            const iKnow = () => {
                this.setUrgentRead();
                this.closeNotify();
            }
            this.closeNotify();
            this.notifyInstance = this.$notify({
                title: '通知',
                showClose: false,
                duration: 0,
                iconClass: "el-icon-message-solid",
                onClose:() => {
                    this.notifyInstance=null;
                },
                message: <div>
                    <div> 您有{this.urgentData.total}条新的紧急任务，请抓紧时间处理</div>
                    <div>
                        <el-button type="default" size="mini" on-click={iKnow}>我知道了</el-button>
                        <el-button type="primary" size="mini" on-click={jumpTo}>立即处理</el-button>
                    </div>
                </div>
            });
        },
        // 获取紧急数量
        async getUgentNum() {
            if(this.notifyInstance) return;
            let result = await service('tobplan_qryUrgentPlanCountByStaffId', {
                data: {
                    staffId: this.staffId,
                    orgId: this.orgaId
                }
            })
            if(result && result.result === '0') {
                this.urgentData = {
                    total: result.total || result.rows?.length,
                    rows: result.rows
                }
                if(this.urgentData.total) {
                    this.showNotify();
                }
            }
            // console.log(result, "-----result")

        },
        openMessage() {
            
            this.$refs.messageDialog.show();
        },
        async getMessage() {
            const data = await service("nt_countNotice", {
                data: {
                    jobNo: this.staffId,
                    msgStatus: '0',
                },
            });
			const tatal = data?.rsp?.data || 0
            if (tatal > 0) {
                this.hidden = false;
                this.value = tatal;
            } else if (tatal >= 100) {
                this.value = "99+";
                this.hidden = false;
            } else {
                this.hidden = true;
            }
        },
       
        selectedChange(val) {
            this.selectedChangeData = val;
        },
        resetOut() {
            this.$refs.filterTable[0].operationHandle({ handle: "query" }); //查询
        },
        async changeRead(flag) {
            if (this.selectedChangeData.length <= 0) {
                this.$alert("请选择数据", "提示", {
                    confirmButtonText: "确定",
                });
                return false;
            } else if (this.selectedChangeData.length > 1) {
                this.$alert("最多选择一条数据", "提示", {
                    confirmButtonText: "确定",
                });
                return false;
            }
            const messageId = this.selectedChangeData
                .map((item) => {
                    return item.messageId;
                })
                .toString();
            const params = {
                messageId,
                status: flag,
            };
            const data = await service("updateMessageInfo", {
                data: params,
            });
            this.selectedChangeData = [];
            this.$refs.filterTable.filterFormQueryHandle();
            this.getMessage();
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        clearInterval(this.ugentTimer);
        this.closeNotify();
    },
    
};
</script>

<style lang="scss" scoped>
.lingdang {
    width: 16px;
    height: 16px;
    background-image: url("./images/lingdang.png");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    // margin-right: 25px;
    cursor: pointer;
}
::v-deep .el-badge__content {
    height: 13px;
    line-height: 13px;
    padding: 0 3px;
    font-size: 10px;
}
</style>
